<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">		
		<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
		<link href="../../plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<title>不定高元素垂直居中</title>
		<style>
			.panel{
				border-left-width: 0;
				border-right-width: 0;
				border-bottom-width: 0;
				border-radius: 0;
			}
			.code,.demo{
				height: 350px;
				border: 1px solid #ddd;
			}
			.code{
				border-right-width: 0;
				overflow: auto;
			}
			pre{
				overflow: auto;
			}
			.demo{
				padding: 15px;
			}
			.outer{
				width: 100%;
				height: 100%;
				padding:10px;
				background-color: #ddd;
				font-size: 18px;
			}
			.inner{
			}
			.outer1{
				display: table;
				table-layout: fixed;
			}	
			.outer1>.inner{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			.outer2{
				text-align: center;
			}
			.outer2:before {
			  content: '';
			  display: inline-block;
			  width: 1px;
			  height: 100%;
			  vertical-align: middle;
			}
			.outer2>.inner{
				display: inline-block;
				width: 90%;
				vertical-align: middle;
				text-align: center;
			}
			.outer3{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.outer4{
				position: relative;
			}
			.outer4>.inner{
				position: absolute;
				top:50%;
				left:50%;
				-webkit-transform: translate(-50%,-50%);
				-ms-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
			}
			@media(max-width:767px){
				.code{
					height: auto;
					border-right-width: 1px;
					border-bottom-width: 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="panel">
			<div class="panel-heading">
				<strong>方法一：根据display的table属性</strong>
			</div>
			<div class="panel-body">
				<div class="col-sm-6 col-xs-12 code">
					<h4>html</h4>
					<pre>&lt;div class="outer1"&gt;<br>&nbsp;&nbsp;&lt;div class="inner">根据display的table属性实现垂直居中&lt;/div&gt;<br>&lt;/div&gt;</pre>
					<h4>css</h4>
					<pre>.outer1{<br>&nbsp;&nbsp;display: table;<br>&nbsp;&nbsp;table-layout: fixed;<br>}<br>.outer1>.inner{<br>&nbsp;&nbsp;display: table-cell;<br>&nbsp;&nbsp;vertical-align: middle;<br>&nbsp;&nbsp;text-align: center;<br>}</pre>
				</div>
				<div class="col-sm-6 col-xs-12 demo">
					<div class="outer outer1">
						<div class="inner">根据display的table属性实现垂直居中</div>
					</div>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-heading">
				<strong>方法二：根据display的inline-block属性</strong>
			</div>
			<div class="panel-body">
				<div class="col-sm-6 col-xs-12 code">
					<h4>html</h4>
					<pre>&lt;div class="outer2"&gt;<br>&nbsp;&nbsp;&lt;div class="inner">根据display的inline-block属性实现垂直居中&lt;/div&gt;<br>&lt;/div&gt;</pre>
					<h4>css</h4>
					<pre>.outer2{<br>&nbsp;&nbsp;text-align:center;<br>}<br>.outer2:before{<br>&nbsp;&nbsp;content: '';<br>&nbsp;&nbsp;display: inline-block;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;vertical-align: middle;<br>}<br>.outer2>.inner{<br>&nbsp;&nbsp;display: inline-block;<br>&nbsp;&nbsp;vertical-align: middle;<br>&nbsp;&nbsp;text-align: center;<br>}</pre>
				</div>
				<div class="col-sm-6 col-xs-12 demo">
					<div class="outer outer2">
						<div class="inner">根据display的inline-block属性实现垂直居中</div>
					</div>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-heading">
				<strong>方法三：根据display的flex属性</strong>
			</div>
			<div class="panel-body">
				<div class="col-sm-6 col-xs-12 code">
					<h4>html</h4>
					<pre>&lt;div class="outer3"&gt;<br>&nbsp;&nbsp;&lt;div class="inner">根据display的flex属性实现垂直居中&lt;/div&gt;<br>&lt;/div&gt;</pre>
					<h4>css</h4>
					<pre>.outer3{<br>&nbsp;&nbsp;display: flex;&nbsp;&nbsp;/*需根据兼容性添加前缀*/<br>&nbsp;&nbsp;justify-content: center;<br>&nbsp;&nbsp;align-items: center;<br>}</pre>
				</div>
				<div class="col-sm-6 col-xs-12 demo">
					<div class="outer outer3">
						<div class="inner">根据display的flex属性实现垂直居中</div>
					</div>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-heading">
				<strong>方法四：根据transform的translate属性</strong>
			</div>
			<div class="panel-body">
				<div class="col-sm-6 col-xs-12 code">
					<h4>html</h4>
					<pre>&lt;div class="outer4"&gt;<br>&nbsp;&nbsp;&lt;div class="inner">根据display的flex属性实现垂直居中&lt;/div&gt;<br>&lt;/div&gt;</pre>
					<h4>css</h4>
					<pre>.outer4{<br>&nbsp;&nbsp;position: relative;<br>}<br>.inner{<br>&nbsp;&nbsp;position:absolute;<br>&nbsp;&nbsp;top:50%;<br>&nbsp;&nbsp;left:50%;<br>&nbsp;&nbsp;transform:translate(-50%,-50%);&nbsp;&nbsp;/*需根据兼容性添加前缀*/<br>}</pre>
				</div>
				<div class="col-sm-6 col-xs-12 demo">
					<div class="outer outer4">
						<div class="inner">根据transform的translate属性</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
